<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加/修改页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="add">
            <div class="header">
                <span>{{(action == 'Add'?'添加':'修改')}}销售信息</span>
            </div>
            <div class="main" style="padding: 0 15px;">
                <!-- 配置属性, 目前仅支持 单主表 多子表 结构 -->
                <div id="form" :data-options="JSON.stringify({'tableName':'sales_order','formName':'dataForm' ,'primaryKey':'Sales_Order_SerialNumber'})">
                    <!-- 子表 -->
                    <div :data-options="JSON.stringify({'tableName':'sales_order_detail','formName':'childDataForm', 'parentTableName':'sales_order'})"></div>
                </div>

                <div class="table_titel">
                    <div class="titel">销售订单管理</div>
                </div>
                <el-form :model="dataForm" ref="form" :inline-message="true" style="width: 100%">
                    <el-descriptions :column="2" size="large" border>
                        
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">商铺流水号</div>
                            </template>
                            <el-form-item prop="Merchant_SerialNumber" :rules="[{ required: true, message: '请输入商铺流水号', trigger: 'blur' }]">
                                <el-input v-model.trim="dataForm.Merchant_SerialNumber" placeholder="请输入商铺流水号" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>	

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">详细地址</div>
                            </template>
                            <el-form-item prop="CountyNumber" :rules="[{ required: true, message: '请选择详细地址', trigger: 'change' }]">
                                <el-cascader @change="changeCity" v-model.trim="dataForm.CountyNumber" filterable
                                    :props="{label:'name',value:'code',emitPath:false}" :options="city" clearable
                                    placeholder="请选择地址（省-市-区）" style="width: 100%;"></el-cascader>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">省行政区编号</div>
                            </template>
                            <el-form-item prop="ProvinceNumber">
                                <el-input v-model.trim="dataForm.ProvinceNumber" placeholder="自动填充" disabled></el-input>
                            </el-form-item>
                        </el-descriptions-item>	

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">市行政区编号</div>
                            </template>
                            <el-form-item prop="CityNumber">
                                <el-input v-model.trim="dataForm.CityNumber" placeholder="自动填充" disabled></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">区行政区编号</div>
                            </template>
                            <el-form-item prop="CountyNumber">
                                <el-input v-model.trim="dataForm.CountyNumber" placeholder="自动填充" disabled></el-input>
                            </el-form-item>
                        </el-descriptions-item>	

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">用户姓名</div>
                            </template>
                            <el-form-item prop="Sales_Contacts" :rules="[{ required: true, message: '请输入用户姓名', trigger: 'blur' }]">
                                <el-input v-model.trim="dataForm.Sales_Contacts" placeholder="请输入用户姓名" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">联系方式</div>
                            </template>
                            <el-form-item prop="Sales_Phone" :rules="[{ required: true, message: '请输入联系方式', trigger: 'blur' }]">
                                <el-input v-model.trim="dataForm.Sales_Phone" placeholder="请输入联系方式" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">备注</div>
                            </template>
                            <el-form-item prop="Sales_Message" :rules="[{ required: true, message: '请输入备注', trigger: 'blur' }]">   
                                <el-input v-model.trim="dataForm.Sales_Message" placeholder="请输入备注" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">销售时间</div>
                            </template>
                            <el-form-item prop="Sales_Date" :rules="[{ required: true, message: '请输入销售时间', trigger: 'blur' }]">   
                                <el-date-picker v-model="dataForm.Sales_Date" type="date" value-format="yyyy-MM-dd" placeholder="请选择销售时间"></el-date-picker>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">付款时间</div>
                            </template>
                            <el-form-item prop="Collection_Date" :rules="[{ required: true, message: '请输入付款时间', trigger: 'blur' }]">   
                                <el-date-picker v-model="dataForm.Collection_Date" type="date" value-format="yyyy-MM-dd" placeholder="请选择付款时间"></el-date-picker>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">销售金额</div>
                            </template>
                            <el-form-item prop="Sales_Amount" :rules="[{ required: true, message: '请输入销售金额', trigger: 'blur' }]">   
                                <el-input v-model.trim="dataForm.Sales_Amount" placeholder="请输入销售金额" type="number" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">付款金额</div>
                            </template>
                            <el-form-item prop="Collection_Amount" :rules="[{ required: true, message: '请输入付款金额', trigger: 'blur' }]">   
                                <el-input v-model.trim="dataForm.Collection_Amount" placeholder="请输入付款金额" type="number" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <!-- <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">选择订单状态</div>
                            </template>
                            <el-form-item prop="Row_Status" :rules="[{ required: true, message: '请选择订单状态', trigger: 'change' }]">
                                <el-select v-model="dataForm.Row_Status" placeholder="请选择订单状态" clearable>
                                    <el-option v-for="item in orderStatusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item> -->

                    </el-descriptions>
                </el-form>

                <div class="table_titel">
                    <div class="titel">销售规格</div>
                    <div class="operation">
                        <el-button type="primary" size="small" @click="handleAdd('childDataForm')">新增</el-button>
                        <el-button type="danger" size="small" @click="handleRemove('childDataForm')">删除</el-button>
                    </div>
                </div>

                <el-form :model="{childDataForm:childDataForm.filter(i=>i.Row_Status != '1')}" ref="childForm" 
                    :inline-message="true" style="width: 100%">
                    <el-descriptions :column="2" size="large" border 
                        v-for="(item,index) in childDataForm.filter(i=>i.Row_Status != '1')" :key="index">

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">销售执行单流水号</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Execute_Unit_Price_SerialNumber`" :rules="[{ required: true, message: '请输入销售执行单流水号', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Execute_Unit_Price_SerialNumber" placeholder="请输入销售执行单流水号" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>


                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">适用商品</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Article_SerialNumber`" :rules="[{ required: true, message: '请输入适用商品', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Article_SerialNumber" placeholder="请输入适用商品" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">适用规格</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Specifications_SerialNumber`" :rules="[{ required: true, message: '请输入适用规格', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Specifications_SerialNumber" placeholder="请输入适用规格" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">购买数量</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Quantity`" :rules="[
                                { required: true, message: '请输入购买数量', trigger: 'blur' },
                                { validator: (rule, value, callback) => validateQuantity(index, 'Quantity', value, callback), trigger: 'blur' }
                            ]">
                                <el-input v-model.trim="item.Quantity" @input="calculateAmount(index)" placeholder="请输入购买数量" type="number" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">可退款数量</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Refundable_Quantity`" :rules="[
                                { required: true, message: '请输入可退款数量', trigger: 'blur' },
                                { validator: (rule, value, callback) => validateQuantity(index, 'Refundable_Quantity', value, callback), trigger: 'blur' }
                            ]">
                                <el-input v-model.trim="item.Refundable_Quantity" @input="calculateAmount(index)" placeholder="请输入可退款数量" type="number" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">已退款数量</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Refunded_Quantity`" :rules="[
                                { required: true, message: '请输入已退款数量', trigger: 'blur' },
                                { validator: (rule, value, callback) => validateQuantity(index, 'Refunded_Quantity', value, callback), trigger: 'blur' }
                            ]">
                                <el-input v-model.trim="item.Refunded_Quantity" @input="calculateAmount(index)" placeholder="请输入已退款数量" type="number"clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">吊牌价</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Unit_Price`" :rules="[{ required: true, message: '请输入吊牌价', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Unit_Price" placeholder="请输入吊牌价" type="number"clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">销售单价</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Sales_Unit_Price`" :rules="[{ required: true, message: '请输入销售单价', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Sales_Unit_Price" @input="calculateAmount(index)" placeholder="请输入销售单价" type="number" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">可退款金额</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Refundable_Amount`" :rules="[{ required: true, message: '请输入可退款金额', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Refundable_Amount" placeholder="自动计算" disabled></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">已退款金额</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Refunded_Amount`" :rules="[{ required: true, message: '请输入已退款金额', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Refunded_Amount" placeholder="自动计算" disabled></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">总金额</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Amount`" :rules="[{ required: true, message: '请输入总金额', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Amount" placeholder="自动计算" disabled></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        
                    </el-descriptions>
                </el-form>
            </div>
            <div class="footer">
                <el-button size="medium" @click="handleBack">返回</el-button>
                <el-button size="medium" type="primary" plain @click="handleSubmit" :loading="loading">提交</el-button>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/components.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <script type="text/javascript" src="js/add.js"></script>
</body>

</html>